<template>
  <div>
    <el-row>
      <el-col :span="8" style="padding-right: 10px">
        <!-- 用户信息 -->
        <el-card class="box-card">
          <div class="user">
            <img :src=touXiangUrl alt="" />
            <div class="userinfo">
              <p class="name">{{ name }}</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p class="">
              上次登录的时间 <span>{{ updataTime }}</span>
            </p>
            <p>上次登录的地点<span>成都</span></p>
          </div>
        </el-card>
        <!-- 表格 -->
        <el-card style="margin-top: 20px">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in userMessage"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="16" style="padding-left: 10px">
        <!-- 右上部分 -->
        <el-card>
          <el-form ref="form" :model="form" label-width="80px" size="small">
            <el-form-item label="店铺名称">
              <el-input v-model="form.door_name"></el-input>
            </el-form-item>
            <el-form-item label="营业时间">
              <el-col :span="11">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.openTime"
                  style="width: 100%"
                ></el-time-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.closeTime"
                  style="width: 100%"
                ></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="店铺地址">
              <el-cascader
                size="large"
                :options="pcaTextArr"
                v-model="form.address"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="营业状态">
              <el-switch v-model="form.isOpenState"></el-switch>
            </el-form-item>
            <el-form-item label="店铺简介">
              <el-input type="textarea" v-model="form.message"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="user_edit_btn">
                <el-button type="primary" size="small" @click="handleEdit(form)"
                  >点击编辑</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="margin-top: 20px">
          <div class="todo-app">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待办事件" name="first">
                <ul class="todo-list">
                  <li
                    v-for="(todo, index) in activeTodoList"
                    :key="index"
                    class="todo-item"
                  >
                    <div class="list_mess">
                      <span
                        @dblclick="todo.editing = true"
                        v-show="!todo.editing"
                        class="todo-text"
                        >{{ todo.text }}</span
                      >
                      <div>
                        <button @click="editTodo(todo)" class="todo-done">
                          完成
                        </button>
                        <button @click="removeTodo(todo)" class="todo-delete">
                          删除
                        </button>
                      </div>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="已办事件" name="second">
                <ul class="todo-list">
                  <li
                    v-for="(todo, index) in doneTodoList"
                    :key="index"
                    class="todo-item"
                  >
                    <div class="list_mess">
                      <span class="todo-text">{{ todo.text }}</span>
                      <button @click="removeTodo(todo)" class="todo-delete">
                        删除
                      </button>
                    </div>
                  </li>
                </ul></el-tab-pane
              >
            </el-tabs>

            <div>
              <h4>新增事件</h4>
              <input
                type="text"
                v-model="newTodo"
                @keyup.enter="addTodo"
                class="todo-add"
                placeholder="请输入新增事件"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import { pcaTextArr } from "element-china-area-data";
export default {
  data() {
    return {
      // 地址
      pcaTextArr,
      updataTime: "",
      name: "",
      // 记事本
      newTodo: "",
      activeName: "first",
      todosList: [],
      touXiangUrl: '',
      dataValue: new Date(),
      userMessage: [
        {
          content: "店铺名称",
          timestamp: "麻辣王子",
          color: "#0bbd87",
        },
        {
          content: "介绍",
          timestamp: "是一家也很好吃的代纳普，10元一个包的辣条",
          color: "#0bbd87",
        },
        {
          content: "营业时间",
          timestamp: "9:00 - 20:00",
          color: "#0bbd87",
        },
        {
          content: "联系电话",
          timestamp: "080-8888888",
          color: "#0bbd87",
        },
      ],
      isEidtModelVisible: false,
      form: {
        door_name: "",
        openTime: "",
        closeTime: "",
        address: [],
        phone: "",
        isOpenState: false,
        message: "",
      },
    };
  },

  async created() {
    this.getDate();
    this.getTodoList();
  },
  mounted() {},
  computed: {
    activeTodoList() {
      return this.todosList.filter((item) => !item.done);
    },
    doneTodoList() {
      return this.todosList.filter((item) => item.done);
    },
  },
  methods: {
    async getDate() {
      const poiId = localStorage.getItem("poiId");
      const { data: res } = await axios.get("/admin/user");
      console.log(res);
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.name = res.data.name;
      this.updataTime = res.data.updataTime;
      this.form = res.data;
      this.form.isOpenState = res.data.isOpenState ? true : false;
      this.form.address = JSON.parse(res.data.address);
      this.userMessage[0].timestamp = res.data.door_name;
      this.userMessage[1].timestamp = res.data.message;
      this.userMessage[2].timestamp = res.data.door_name;
      this.userMessage[3].timestamp = res.data.phone;

      const { data: resV2 } = await axios.get("/admin/shop_images", {
        params: {
          poiId,
        }
      });
      if (resV2.code !== 200) {
        this.$message.error(resV2.msg);
        return;
      }
      this.touXiangUrl = 'data:image/png;base64,' + resV2.data[0].url;

    },
    async getTodoList() {
      const { data: res } = await axios.get("/admin/user/getTodo");
      console.log(res);
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.todosList = res.data;
    },
    // 记事本
    async addTodo() {
      if (this.newTodo === "") {
        return this.$message({
          type: "warning",
          message: "请输入正确的新增事件名称",
        });
      }
      this.todosList.push({ text: this.newTodo, done: false, editing: false });
      const { data: res } = await axios.post("/admin/user/addTodo", {
        text: this.newTodo,
        done: false,
        editing: false,
      });
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.newTodo = "";
      this.getTodoList();
    },
    async editTodo(item) {
      const { data: res } = await axios.post("/admin/user/editTodo", {
        id: item.id,
        done: true,
      });
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.getTodoList();
    },
    async removeTodo(item) {
      const { data: res } = await axios.post("/admin/user/deleteTodo", {
        id: item.id,
      });
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.getTodoList();
      // this.todosList.splice(index, 1);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // form表单
    handleEdit(value) {
      console.log("===value", value);
      const {
        address,
        door_name,
        isOpenState,
        message,
        phone,
        closeTime,
        openTime,
      } = value;
      this.$confirm("此操作将编辑商户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: "true",
      })
        .then(async () => {
          const { data: res } = await axios.post("/admin/user/edit", {
            address,
            door_name,
            isOpenState,
            message,
            phone,
            closeTime,
            openTime,
          });
          console.log(res);
          if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
          }

          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getDate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消编辑",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.user_edit_btn {
  text-align: center;
}
.user {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 20px;
  // justify-content: center;
  img {
    margin-right: 40px;
    width: 40%;
    // height: 150px;
    border-radius: 50%;
  }
  .userinfo {
    .name {
      font-size: 30px;
      margin-bottom: 10px;
    }
    .access {
      color: #999;
    }
  }
}
.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999;
    span {
      color: #666;
      margin-left: 60px;
    }
  }
}
.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.todo-app {
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  .todo-list {
    list-style: none;
    padding: 0;
    max-height: 260px;
    overflow-y: scroll;
    font-size: 14px;
    .todo-item {
      border: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 5px 10px;
      border-radius: 4px;
      .list_mess {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .todo-text {
          margin-right: 10px;
        }
        .todo-done {
          background-color: #5cb85c;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 5px 10px;
          margin-right: 10px;
        }
        .todo-delete {
          background-color: #d9534f;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 5px 10px;
        }
      }
    }
  }
}

.todo-add {
  width: 98%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}
</style>
